<template>
  <div>
      <!--引用表格-->
     <BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="caishuiTaskSettleItemColumns" :dataSource="dataSource" :pagination="false">
       <!--身份信息插槽插槽-->
       <template #infoSlot="{record}">
        <span style="text-align: left;">
          <p>姓名：<span style="font-weight: bold;">{{record.name}}</span></p>
          <p>手机号码：<span style="font-weight: bold;">{{record.phone}}</span></p>
          <p>证件类型：<span style="font-weight: bold;">{{record.idCardType}}</span></p>
          <p>证件号码：<span style="font-weight: bold;">{{record.idCard}}</span></p>
        </span>
       </template>
       <!--银行信息插槽插槽-->
       <template #bankSlot="{record}">
        <span style="text-align: left;">
          <p>下发类型：<span style="font-weight: bold;">{{record.type_dictText}}</span></p>
          <p>收款账号：<span style="font-weight: bold;">{{record.bankCard}}</span></p>
          <p>银行名称：<span style="font-weight: bold;">{{record.bankName}}</span></p>
<!--          <p>开户行：<span style="font-weight: bold;">{{record.accountName}}</span></p>-->
        </span>
       </template>
       <!--状态插槽-->
       <template #statusSlot="{record}">
         <a-badge v-if="record.status==0" color="blue" :text="record.status_dictText" />
         <a-badge v-if="record.status==1" color="cyan" :text="record.status_dictText" />
         <a-badge v-if="record.status==2" color="green" :text="record.status_dictText" />
         <a-badge v-if="record.status==3" color="red" :text="record.status_dictText" />
       </template>
       <!--文件插槽-->
        <template #fileSlot="{text}">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
           <a-button v-else :ghost="true" type="danger" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
        </template>
      </BasicTable>
    </div>
</template>

<script lang="ts" setup>
  import {ref,watchEffect} from 'vue';
  import {BasicTable} from '/@/components/Table';
  import {caishuiTaskSettleItemColumns} from '../CaishuiTaskSettle.data';
  import {taskSettleItemList} from '../CaishuiTaskSettle.api';
  import {downloadFile} from '/@/utils/common/renderUtils';

  const props = defineProps({
    id: {
       type: String,
       default: '',
     },
  })

  const loading = ref(false);
  const dataSource = ref([]);

  watchEffect(() => {
      props.id && loadData(props.id);
   });

   function loadData(id) {
         dataSource.value = []
         loading.value = true
          taskSettleItemList({id}).then((res) => {
           if (res.success) {
              dataSource.value = res.result.records
           }
         }).finally(() => {
           loading.value = false
         })
    }
</script>
